ప్రధాన కంటెంట్‌కు దాటవేయండి డాక్స్ నావిగేషన్‌కు దాటవేయండి
in English

పరిచయం

JsDelivr మరియు టెంప్లేట్ స్టార్టర్ పేజీతో ప్రతిస్పందించే, మొబైల్-ఫస్ట్ సైట్‌లను రూపొందించడానికి ప్రపంచంలోని అత్యంత ప్రజాదరణ పొందిన ఫ్రేమ్‌వర్క్ అయిన బూట్‌స్ట్రాప్‌తో ప్రారంభించండి.

ఈ పేజీలో

త్వరగా ప్రారంభించు

మీ ప్రాజెక్ట్‌కి త్వరగా బూట్‌స్ట్రాప్‌ని జోడించాలనుకుంటున్నారా? jsDelivr, ఉచిత ఓపెన్ సోర్స్ CDNని ఉపయోగించండి. ప్యాకేజీ మేనేజర్‌ని ఉపయోగిస్తున్నారా లేదా సోర్స్ ఫైల్‌లను డౌన్‌లోడ్ చేయాలా? డౌన్‌లోడ్‌ల పేజీకి వెళ్లండి .

CSS

మా CSSని లోడ్ చేయడానికి అన్ని ఇతర స్టైల్‌షీట్‌ల కంటే ముందుగా <link>మీ స్టైల్‌షీట్‌ను కాపీ-పేస్ట్ చేయండి.<head>

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

JS

మా అనేక భాగాలు పని చేయడానికి JavaScriptను ఉపయోగించడం అవసరం. ప్రత్యేకంగా, వారికి మా స్వంత జావాస్క్రిప్ట్ ప్లగిన్‌లు మరియు పాపర్ అవసరం . వాటిని ఎనేబుల్ చేయడానికి, ముగింపు ట్యాగ్‌కు ముందు, మీ పేజీల చివరలో కింది వాటిలో ఒకదాన్ని<script> ఉంచండి .</body>

కట్ట

మా రెండు బండిల్‌లలో ఒకదానితో ప్రతి బూట్‌స్ట్రాప్ జావాస్క్రిప్ట్ ప్లగిన్ మరియు డిపెండెన్సీని చేర్చండి. మా టూల్‌టిప్‌లు మరియు పాపవర్‌ల bootstrap.bundle.jsకోసం పాప్పర్‌ని చేర్చండిbootstrap.bundle.min.js . బూట్‌స్ట్రాప్‌లో చేర్చబడిన వాటి గురించి మరింత సమాచారం కోసం, దయచేసి మా కంటెంట్‌ల విభాగాన్ని చూడండి.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

వేరు

మీరు ప్రత్యేక స్క్రిప్ట్‌ల సొల్యూషన్‌తో వెళ్లాలని నిర్ణయించుకుంటే, పాప్పర్ తప్పనిసరిగా ముందుగా రావాలి (మీరు టూల్‌టిప్‌లు లేదా పాపవర్‌లను ఉపయోగిస్తుంటే), ఆపై మా జావాస్క్రిప్ట్ ప్లగిన్‌లు.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

మాడ్యూల్స్

మీరు ఉపయోగిస్తే <script type="module">, దయచేసి మా బూట్‌స్ట్రాప్‌ని మాడ్యూల్ విభాగంగా ఉపయోగించడాన్ని చూడండి.

భాగాలు

మా జావాస్క్రిప్ట్ మరియు పాపర్ ఏ భాగాలకు స్పష్టంగా అవసరమో ఆసక్తిగా ఉందా? దిగువ షో భాగాల లింక్‌పై క్లిక్ చేయండి. సాధారణ పేజీ నిర్మాణం గురించి మీకు ఖచ్చితంగా తెలియకుంటే, ఉదాహరణ పేజీ టెంప్లేట్ కోసం చదువుతూ ఉండండి.

JavaScript అవసరమయ్యే భాగాలను చూపు
  • తొలగించడం కోసం హెచ్చరికలు
  • రాష్ట్రాలు మరియు చెక్‌బాక్స్/రేడియో కార్యాచరణను టోగుల్ చేయడం కోసం బటన్‌లు
  • అన్ని స్లయిడ్ ప్రవర్తనలు, నియంత్రణలు మరియు సూచికల కోసం రంగులరాట్నం
  • కంటెంట్ దృశ్యమానతను టోగుల్ చేయడం కోసం కుదించు
  • ప్రదర్శించడం మరియు ఉంచడం కోసం డ్రాప్‌డౌన్‌లు ( పాపర్ కూడా అవసరం )
  • ప్రవర్తనను ప్రదర్శించడం, ఉంచడం మరియు స్క్రోల్ చేయడం కోసం నమూనాలు
  • ప్రతిస్పందించే ప్రవర్తనను అమలు చేయడానికి మా కుదించు ప్లగ్‌ఇన్‌ని విస్తరించడానికి Navbar
  • ప్రదర్శించడం మరియు తీసివేయడం కోసం టోస్ట్‌లు
  • ప్రదర్శించడం మరియు ఉంచడం కోసం టూల్‌టిప్‌లు మరియు పాప్‌ఓవర్‌లు ( పాపర్ కూడా అవసరం )
  • స్క్రోల్ ప్రవర్తన మరియు నావిగేషన్ నవీకరణల కోసం Scrollspy

స్టార్టర్ టెంప్లేట్

మీ పేజీలను తాజా డిజైన్ మరియు డెవలప్‌మెంట్ ప్రమాణాలతో సెటప్ చేశారని నిర్ధారించుకోండి. అంటే HTML5 డాక్టైప్‌ని ఉపయోగించడం మరియు సరైన ప్రతిస్పందించే ప్రవర్తనల కోసం వీక్షణపోర్ట్ మెటా ట్యాగ్‌ని ఉపయోగించడం. అన్నింటినీ కలిపి ఉంచండి మరియు మీ పేజీలు ఇలా ఉండాలి:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

తదుపరి దశల కోసం, మీ సైట్ యొక్క కంటెంట్ మరియు భాగాలను లేఅవుట్ చేయడం ప్రారంభించడానికి లేఅవుట్ డాక్స్ లేదా మా అధికారిక ఉదాహరణలను సందర్శించండి.

ముఖ్యమైన గ్లోబల్స్

బూట్‌స్ట్రాప్ కొన్ని ముఖ్యమైన గ్లోబల్ స్టైల్స్ మరియు సెట్టింగ్‌లను ఉపయోగిస్తుంది, వీటిని ఉపయోగిస్తున్నప్పుడు మీరు తెలుసుకోవలసిన అవసరం ఉంది, ఇవన్నీ దాదాపు ప్రత్యేకంగా క్రాస్ బ్రౌజర్ స్టైల్స్ సాధారణీకరణకు ఉద్దేశించబడ్డాయి. డైవ్ చేద్దాం.

HTML5 సిద్ధాంతం

బూట్‌స్ట్రాప్‌కు HTML5 డాక్టైప్‌ని ఉపయోగించడం అవసరం. అది లేకుండా, మీరు కొన్ని ఫంకీ అసంపూర్ణ స్టైలింగ్‌ను చూస్తారు, కానీ దానితో సహా ఏవైనా గణనీయమైన ఎక్కిళ్ళు కలిగించకూడదు.

<!doctype html>
<html lang="en">
  ...
</html>

ప్రతిస్పందించే మెటా ట్యాగ్

బూట్‌స్ట్రాప్ మొబైల్ ఫస్ట్ డెవలప్ చేయబడింది, దీనిలో మేము ముందుగా మొబైల్ పరికరాల కోసం కోడ్‌ని ఆప్టిమైజ్ చేసి, ఆపై CSS మీడియా ప్రశ్నలను ఉపయోగించి అవసరమైన భాగాలను పెంచే వ్యూహం. అన్ని పరికరాల కోసం సరైన రెండరింగ్ మరియు టచ్ జూమ్‌ని నిర్ధారించడానికి, మీ .కి ప్రతిస్పందించే వీక్షణపోర్ట్ మెటా ట్యాగ్‌ని జోడించండి<head> .

<meta name="viewport" content="width=device-width, initial-scale=1">

మీరు స్టార్టర్ టెంప్లేట్‌లో చర్యలో దీనికి ఉదాహరణను చూడవచ్చు .

పెట్టె పరిమాణం

CSSలో మరింత సరళమైన పరిమాణం కోసం, మేము గ్లోబల్ box-sizingవిలువను నుండి content-boxకు మారుస్తాము border-box. paddingఇది మూలకం యొక్క తుది కంప్యూటెడ్ వెడల్పును ప్రభావితం చేయదని నిర్ధారిస్తుంది , అయితే ఇది Google మ్యాప్స్ మరియు Google అనుకూల శోధన ఇంజిన్ వంటి కొన్ని మూడవ పక్ష సాఫ్ట్‌వేర్‌లతో సమస్యలను కలిగిస్తుంది.

అరుదైన సందర్భంలో మీరు దానిని భర్తీ చేయవలసి ఉంటుంది, ఈ క్రింది వాటిని ఉపయోగించండి:

.selector-for-some-widget {
  box-sizing: content-box;
}

పైన పేర్కొన్న స్నిప్పెట్‌తో, సమూహ మూలకాలు—ద్వారా రూపొందించబడిన కంటెంట్‌తో సహా ::beforeమరియు —అన్నీ దాని కోసం ::afterపేర్కొన్న వాటిని వారసత్వంగా పొందుతాయి .box-sizing.selector-for-some-widget

CSS ట్రిక్స్‌లో బాక్స్ మోడల్ మరియు సైజింగ్ గురించి మరింత తెలుసుకోండి .

రీబూట్ చేయండి

మెరుగైన క్రాస్-బ్రౌజర్ రెండరింగ్ కోసం, మేము సాధారణ HTML మూలకాలకు కొంచెం ఎక్కువ అభిప్రాయ రీసెట్‌లను అందించేటప్పుడు బ్రౌజర్‌లు మరియు పరికరాల్లో అసమానతలను సరిచేయడానికి రీబూట్‌ని ఉపయోగిస్తాము .

సంఘం

బూట్‌స్ట్రాప్ అభివృద్ధిపై తాజాగా ఉండండి మరియు ఈ సహాయక వనరులతో సంఘాన్ని చేరుకోండి.

  • అధికారిక బూట్‌స్ట్రాప్ బ్లాగ్‌ని చదవండి మరియు సభ్యత్వాన్ని పొందండి .
  • IRCలో తోటి బూట్‌స్ట్రాపర్‌లతో చాట్ చేయండి. irc.libera.chatసర్వర్‌లో, ఛానెల్‌లో #bootstrap.
  • bootstrap-5అమలు సహాయాన్ని స్టాక్ ఓవర్‌ఫ్లో (ట్యాగ్ చేయబడింది ) వద్ద కనుగొనవచ్చు .
  • డెవలపర్‌లు npm లేదా ఇలాంటి డెలివరీ మెకానిజమ్‌ల bootstrapద్వారా గరిష్ట ఆవిష్కరణ కోసం పంపిణీ చేసేటప్పుడు బూట్‌స్ట్రాప్ యొక్క కార్యాచరణను సవరించే లేదా జోడించే ప్యాకేజీలపై కీవర్డ్‌ని ఉపయోగించాలి.

మీరు తాజా గాసిప్ మరియు అద్భుతమైన సంగీత వీడియోల కోసం Twitterలో @getbootstrapని కూడా అనుసరించవచ్చు .